<template>
  <div>
    <el-dropdown style="margin-left: 8px" v-if="multipleSelection.length>0" trigger="click" placement="bottom">
      <el-button>
        批量操作
        <el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <el-popconfirm title="确认批量删除信息吗?">
              <template #reference>
                <div style="display: flex;align-items: center;">
                  <el-icon size="15">
                    <Delete/>
                  </el-icon>
                  删除
                </div>
              </template>
            </el-popconfirm>
          </el-dropdown-item>
          <el-dropdown-item>
            <div>提交维修单</div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-table :data="faultData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column
          ref="table"
          v-for="item in columns"
          :key="item.prop"
          :fixed="item.fixed"
          :align="item.align"
          :prop="item.prop"
          :min-width="item.minWidth"
          :width="item.width"
          :show-overflow-tooltip="item.tooltip"
          :resizable="item.resizable"
          :label="item.label"
      >
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button
              link
              type="primary"
          >
            详情
          </el-button>
          <el-divider direction="vertical" />
          <el-popconfirm :title='"确认删除该数据吗?"' width="auto" @confirm="console.info(scope.row.productType)">
            <template #reference>
              <el-button link type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
          <el-divider direction="vertical" />
          <el-dropdown trigger="click" placement="bottom">
            <el-button link type="primary">
              更多
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <div>数据监控</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="faultData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column
          ref="table"
          v-for="item in columns"
          :key="item.prop"
          :fixed="item.fixed"
          :align="item.align"
          :prop="item.prop"
          :min-width="item.minWidth"
          :width="item.width"
          :show-overflow-tooltip="item.tooltip"
          :resizable="item.resizable"
          :label="item.label"
      >
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button
              link
              type="primary"
          >
            详情
          </el-button>
          <el-divider direction="vertical" />
          <el-dropdown trigger="click" placement="bottom">
            <el-button link type="primary">
              更多
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-popconfirm title="确认删除该数据吗?" @confirm="console.info(scope.row.productType)">
                    <template #reference>
                      <el-button link type="danger">
                        删除
                      </el-button>
                    </template>
                  </el-popconfirm>
                </el-dropdown-item>
                <el-dropdown-item>
                  <div>数据监控</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {ArrowDown, Delete} from "@element-plus/icons-vue";
  const columns=[{
  "prop": "productType",
  "label": "产品型号",
  "width": "120",
}
]
let multipleSelection = ref([])
let faultData=[{
  productType:"MD30"
}]

const handleSelectionChange=(rows)=>{
  multipleSelection.value=rows
}
</script>